<template>
  <el-card
    class="mr-1 flex-grow select-none"
    header="云台"
    shadow="always"
    style="--el-card-padding: 0"
  >
    <div class="flex items-center pt-1 justify-around">
      <div class="flex flex-col items-center">
        <TargetTracking />
        <div>
          <el-row>
            <el-col :span="8"> </el-col>
            <el-col :span="8">
              <el-button class="" @click="onClickPantilt(PantiltMode.UP, verticalSpeed)">
                <Icon icon="bxs:up-arrow"></Icon>
              </el-button>
            </el-col>
            <el-col :span="8"> </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="8">
              <el-button @click="onClickPantilt(PantiltMode.LEFT, horizonSpeed)">
                <Icon icon="bxs:left-arrow"></Icon>
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button @click="onClickPantilt(PantiltMode.STOP, 255)">
                <Icon icon="icomoon-free:switch"></Icon>
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button @click="onClickPantilt(PantiltMode.RIGHT, horizonSpeed)">
                <Icon icon="bxs:right-arrow"></Icon>
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8"> </el-col>
            <el-col :span="8">
              <el-button @click="onClickPantilt(PantiltMode.DOWN, verticalSpeed)">
                <Icon icon="bxs:down-arrow"></Icon>
              </el-button>
            </el-col>
            <el-col :span="8"> </el-col>
          </el-row>
        </div>

        <div class="flex my-2">
          <el-button
            :style="changeBtnColor(PantiltMode.RESET)"
            size="small"
            @click="onClickPantilt(PantiltMode.RESET, 255)"
            >{{ t('fu-wei') }}</el-button
          >
          <el-button
            :style="changeBtnColor(PantiltMode.RECALL)"
            size="small"
            @click="onClickPantilt(PantiltMode.RECALL, 255)"
            >{{ t('che-shou') }}</el-button
          >
          <el-button
            :style="changeBtnColor(PantiltMode.INITIAL)"
            size="small"
            @click="onClickPantilt(PantiltMode.INITIAL, 255)"
          >
            {{ t('chu-shi-hua') }}</el-button
          >
        </div>
      </div>

      <div class="flex flex-col text-sm w-48 pb-1">
        <div class="flex items-center pb-2">
          <span class="mr-2">{{ t('shui-ping-jiao-du') }}</span>
          <ElSlider
            :marks="mark1"
            v-model="horizonAngle"
            class="mr-4"
            :step="1"
            :min="0"
            :max="360"
            :show-input-controls="false"
            @change="handleChangeAngle()"
          />
        </div>
        <div class="flex items-center pb-2">
          <span class="mr-4">{{ t('chui-zhi-jiao-du') }}</span>
          <ElSlider
            :marks="mark2"
            v-model="verticalAngle"
            class="mr-4"
            :step="1"
            :min="-20"
            :max="20"
            :show-input-controls="false"
            @change="handleChangeAngle()"
          />
        </div>
        <div class="flex items-center pb-2">
          <span class="mr-4">{{ t('shui-ping-su-du') }}</span>
          <el-slider
            :marks="mark3"
            v-model="horizonSpeed"
            class="mr-4"
            :step="1"
            :min="1"
            :max="10"
            :show-input-controls="false"
            @change="handleChangeSpeed()"
          />
        </div>
        <div class="flex items-center pb-2">
          <span class="mr-4">{{ t('chui-zhi-su-du') }}</span>
          <el-slider
            :marks="mark4"
            v-model="verticalSpeed"
            class="mr-4"
            :step="1"
            :min="1"
            :max="10"
            :show-input-controls="false"
            @change="handleChangeSpeed()"
          />
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { patrolingCruise } from '@/api'
import Icon from '@/components/Icon.vue'
import TargetTracking from '@/components/TargetTracking.vue'
import {
  horizonAngle,
  horizonSpeed,
  usePantilt,
  verticalAngle,
  verticalSpeed
} from '@/composables/usePantilt'
import { useCarStore } from '@/stores/car'
import { debounce } from 'lodash'
import { reactive, type CSSProperties } from 'vue'
import { useI18n } from 'vue-i18n'

const { onClickPantilt, PantiltMode, currentBtnIndex } = usePantilt()

const { t } = useI18n()
const carStore = useCarStore()
interface Mark {
  style: CSSProperties
  label: string
}
type Marks = Record<number, Mark | string>
const mark1 = reactive<Marks>({
  0: '0',
  180: '180',
  360: '360'
})
const mark2 = reactive<Marks>({
  '-20': '-20',
  0: '0',
  20: '20'
})
const mark3 = reactive<Marks>({
  1: '1',
  5: '5',
  10: '10'
})
const mark4 = reactive<Marks>({
  1: '1',
  5: '5',
  10: '10'
})

const Types = {
  ANGLE: 5,
  SPEED: 10
}

// 修改角度
const changeAngle = createDebouce(Types.ANGLE)

// 修改速度
const changeSpeed = createDebouce(Types.SPEED)

// 转换成防抖函数，防止过多调度
function createDebouce(param2: number) {
  return debounce(async () => {
    let array = []
    array.push(horizonSpeed.value)
    array.push(verticalSpeed.value)
    if (param2 === Types.ANGLE) {
      array.push(horizonAngle.value)
      array.push(verticalAngle.value)
    }
    const data = {
      code: carStore.currentCar,
      param1: 3,
      param2,
      param3: array.join(','),
      param4: 255
    }
    patrolingCruise(data)
  }, 500)
}

// 修改角度
function handleChangeAngle() {
  changeAngle()
}

//修改速度
function handleChangeSpeed() {
  changeSpeed()
}

const changeBtnColor = (index: number) => {
  if (currentBtnIndex.value === index) {
    return {
      'background-color': '#ff931e',
      color: 'white'
    }
  }
}
</script>
<style scoped lang="scss">
:deep(.el-card__header) {
  padding: 0 0 0 10px;
  font-size: small;
  // border-bottom: none;
}

.el-card {
  min-width: 300px;
  max-width: 600px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .el-card {
    min-width: 250px;
    max-width: 400px;
  }

  :deep(.el-slider) {
    width: 120px;
  }
}

@media screen and (max-width: 480px) {
  .el-card {
    min-width: 200px;
    max-width: 300px;
  }

  :deep(.el-slider) {
    width: 100px;
  }
}
</style>
